const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    del = require('del'),
    sass = require('gulp-sass'),
    cleanCss = require('gulp-clean-css'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    connect = require('gulp-connect'),
    { createProxyMiddleware } = require('http-proxy-middleware')

//定义一个对象集中管理所有的路径
const path = {
    htmlPath: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    sassPath: {
        src: 'src/sass/**/*.scss',
        dest: 'dist/css'
    },
    jsPath: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    imgPath: {
        src: 'src/images/**/*.*',
        dest: 'dist/images'
    },
    libPath: {
        src: 'src/lib/**/*.*',
        dest: 'dist/lib'
    },
    iconPath: {
        src: 'src/**/*.icon',
        dest: 'dist'
    }
}
//定制一个删除dist目录的任务(TODO: del)
const delDist = () => {
    return del('dist')
}
//解构集中管理的路径
const { htmlPath, sassPath, jsPath, imgPath, libPath, iconPath } = path
//定制html任务(TODO: gulp-html-min)
const html = () => {
    return gulp.src(htmlPath.src)
        .pipe(htmlmin({
            removeComments: true, // 清除HTML注释
            collapseWhitespace: true, // 压缩HTML
            collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: false, // 删除<style>和<link>的type="text/css"
            minifyJS: true, // 压缩页面JS
            minifyCSS: true // 压缩页面CSS 
        }))
        .pipe(gulp.dest(htmlPath.dest))
        .pipe(connect.reload())//监控页面实时刷新
}
//定制css任务 1.把所有的scss转为css(TODO:node-sass,gulp-sass) 2.压缩css代码(TODO:gulp-clean-css)
const css = () => {
    return gulp.src(sassPath.src)
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(gulp.dest(sassPath.dest))
        .pipe(connect.reload())//监控页面实时刷新
}
//定制js任务 1.把所有ES6转为ES5(TODO:gulp-babel,@babel/core,@babel/preset-env) 2.压缩js(TODO:gulp-uglify)
const js = () => {
    return gulp.src(jsPath.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(jsPath.dest))
        .pipe(connect.reload())//监控页面实时刷新
}
//把所有的img复制到dist目录
const img = () => {
    return gulp.src(imgPath.src)
        .pipe(gulp.dest(imgPath.dest))
        .pipe(connect.reload())//监控页面实时刷新
}
//把lib文件夹下面的所有东西复制到dist目录
const libs = () => gulp.src(libPath.src).pipe(gulp.dest(libPath.dest)).pipe(connect.reload())//监控页面实时刷新
//复制icon
const icon = () => gulp.src(iconPath.src).pipe(gulp.dest(iconPath.dest)).pipe(connect.reload())//监控页面实时刷新
//监控HTML，sass，js，文件夹，当里面的文件发生改变时，再次执行任务
const watch = () => {
    gulp.watch(htmlPath.src, html)
    gulp.watch(sassPath.src, css)
    gulp.watch(jsPath.src, js)
}
//开启一个服务器(TODO:gulp-connect)
const server = () => {
    connect.server({
        livereload: true,
        port: 1995,
        root: 'dist',
        middleware() {
            // 代理跨域：把以/api开头的请求代理到rap2的接口
            return [
                createProxyMiddleware('/api', {
                    target: 'http://rap2api.taobao.org/app/mock/273373/http/',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }),
                createProxyMiddleware('/xm', {
                    target: 'https://api2.order.mi.com/product/view',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/xm': ''
                    }
                }),
                createProxyMiddleware('/wyy', {
                    target: 'https://music.163.com/store/api/product/ipbanner?type=0',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/wyy': ''
                    }
                })
            ]
        }
    })
}
// 默认任务 执行每一个任务
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, icon, watch, server))